import React, { useState } from "react";
import {
    HashRouter as Router,
    Switch,
    Route,
    Link,
    useHistory
} from "react-router-dom";

// Since routes are regular React components, they
// may be rendered anywhere in the app, including in
// child elements.
//
// This helps when it's time to code-split your app
// into multiple bundles because code-splitting a
// React Router app is the same as code-splitting
// any other React app.

export default function NestingExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/topics">Topics</Link>
                    </li>
                </ul>

                <hr />

                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/topics" component={Topics} />
                </Switch>
            </div>
        </Router>
    );
}

function Home() {

    const [count, setCount] = useState(0)

    // a = () => {
    //     history.push('/Topics');
    // }

    return (
        <div>
            <h2 onClick={() => setCount(count + 1)}>click me</h2>
            <div>{count}</div>
        </div>
    );
}

function Topics({ match }) {
    // The `path` lets us build <Route> paths that are
    // relative to the parent route, while the `url` lets
    // us build relative links.
    let { path, url } = match;

    console.log(match, "========Topics============");

    return (
        <div>
            <h2>Topics</h2>
            <ul>
                <li>
                    <Link to={`${url}/rendering`}>Rendering with React</Link>
                </li>
                <li>
                    <Link to={`${url}/components`}>Components</Link>
                </li>
                <li>
                    <Link to={`${url}/props-v-state`}>Props v. State</Link>
                </li>
            </ul>

            <Switch>
                <Route exact path={path}>
                    <h3>Please select a topic.</h3>
                </Route>
                <Route path={`${url}/:topicId`} component={Topic} />
            </Switch>
        </div>
    );
}

function Topic({ match }) {
    // The <Route> that rendered this component has a
    // path of `/topics/:topicId`. The `:topicId` portion
    // of the URL indicates a placeholder that we can
    // get from `useParams()`.
    //   let { topicId } = useParams();

    let { path, url, topicId } = match;
    console.log(match, "========Topic============");

    return (
        <div>
            <h3>{path}</h3>
            <h3>{url}</h3>
            <h3>{topicId}</h3>
        </div>
    );
}
